import React from 'react';
import Jiagou from './jiagou';
import { Checkbox, Image, Stepper } from "antd-mobile";
import {filterImg} from "../../tools"

function CartItem({ numChange,ck, is, name, guige, price, oddprice, num,imgs, jia }) {
    return (
      <div className="cartItem">
        <div className="itemContent">
          <Checkbox
            className="cartChecked"
            checked={is}
            onChange={(flag) => {
              ck(flag);
            }}
          />
          <Image className="cartImage" src={filterImg(imgs)} />
          <div className="desc">
            <p className="itemName">{name.length>7?name.substr(0,7)+"...":name}</p>
            <p className="guige">{guige}</p>
            <p className="price">
              ￥
              {price} <span>{oddprice}</span>
            </p>
          </div>
          <Stepper
            min={1}
            defaultValue={num}
            inputReadOnly={true}
            style={{ "--button-text-color": "#666" }}
            onChange={(l) => {
              numChange(l);
            }}
          />
        </div>
        {/* 如果有加购选项的话就直接渲染封装的插件，传入参数即可 */}
        {jia ? (
          <Jiagou name={jia.name} price={jia.price} sheng={jia.sheng} />
        ) : null}
      </div>
    );
}

export default CartItem;
